import React, { Component } from 'react';
// 引入 ECharts 主模块
import * as echarts from 'echarts/lib/echarts';
// 引入折线图
import 'echarts/lib/chart/line';
import { GridComponent, TitleComponent } from 'echarts/components';

class Echarts extends Component {
  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    echarts.use([GridComponent, TitleComponent]);
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: '新增用户',
        left: 'center'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [520, 932, 901, 1934, 1290, 1330, 1320],
        type: 'line'
      }]
    });
  }
  render() {
    return (
      <div id="main" style={{ maxWidth: 600, height: 300, marginLeft: '-20px' }}></div>
    );
  }
}
export default Echarts;